<template>
<div class="in_page">
  <header class="input_header">
    采购入库
  </header>
  <section class="sec">
    <!--get_main_mess-->
    <ul class="sec_warp_item">
        <li class="sec_item"  v-for="value in get_main_mess">
          <!--header s-->
          <p class="item_header">
            <i class="sec_icon">
              <img src="/static/sprites/dd/title_flag.png" alt="">
            </i>
            <span>{{value.name}}</span>
          </p>
          <!--header e-->
          <!--main box s-->
          <div class="item_wrap_box" >
            <div class="item_box" v-for="list in value.list">
                   <div class="item_box_title">
                     <p>{{list.name}}</p>
                     <img src="/static/sprites/dd/index_plus.png" alt="" v-on:click="add_1">
                   </div>
                 <div class="item_box_bottom">
                   <p>
                     <img v-bind:src="list.icon" alt="" class="item_box_bottom_img" >
                   </p>
                    <p class="item_box_bottom_bot">
                      <span>{{list.num}}</span><span>斤</span>
                    </p>
                 </div>
             </div>
          </div>
          <!--main box e-->
        </li>
    </ul>
  </section>
  <!--bottom s-->
  <section class="in_page_bottom_btn">
    <ul class="bottom_list ">
      <li class=""  v-for="value in bottom_list"
         v-bind:class="{other_select : value.index == 8, active : value.c_sign}">
         <p v-if = "(value.index == 8)" @click.stop="other_click_f">
           {{value.text}}
           <ul class="other_select_sec" v-show="other_click">
             <li v-bind:class="{active : other.c_sign}"  data-obj= "other" v-for="other in value.other" @click = "select_list_click(other)">
               {{other.text}}
             </li>
           </ul>
         </p>
         <p v-if = "(value.index <= 7)" data-obj= "value" @click = "select_list_click(value)">
           {{value.text}}
         </p>
      </li>
      <li class="next_btn_input" @click="next_btn">
        下一步
      </li>
    </ul>
  </section>
  <!--bottom e-->
  <!--show_mask s-->
  <!--<transition name="fade">-->
    <!--<p v-if="show">hello</p>-->
  <div class="mask"  v-if="mask_show">
      <div class="mask_BaoC">
           <div class="header_x" @click="header_x">
             x
           </div>
           <div class="header_name">
              包菜
           </div>
           <ul class="wrap_input">
             <li class="input_single">
               <span>
                 单价 :
               </span>
               <input type="email" class="mask_input" readonly="true" v-bind:value="top_input" @click="select_input(true)"/>
               <!--<div class="mask_input"></div>-->
               元
             </li>
             <li class="input_num">
               <span>
                 数量 :
               </span>
               <!--<div class="mask_input"></div>-->
               <input type="email" class="mask_input" readonly="true" v-bind:value="bot_input" @click="select_input(false)"/>
               斤
             </li>
             <li class="m_t_50">
               采购了{{bot_input}}斤包菜
             </li>
             <li class="mask_add_btn">
               添加
             </li>
           </ul>
           <div class="num_box">
             <ul class="num_box_warp">
               <li   v-for="value in num_box" class="num_box_item"
                     v-bind:class="{chang_num_box_li:value.del,chang_num_box_li_dot:value.dot}"
                     @click= "num_touch(value.num)"
               >
                 <img src="static/sprites/dd/num_box_del.png" alt=""
                      v-if="value.del" class="num_box_img" @click="del">
                 <p v-if="value.zero">
                   0
                 </p>
                 <p v-else="value.del">
                   {{value.num}}
                 </p>
               </li>
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">1</li>-->
               <!--<li class="num_box_item">.</li>-->
               <!--<li class="num_box_item">0</li>-->
               <!--<li class="num_box_item">1</li>-->
             </ul>
           </div>
      </div>
  </div>
  <!--</transition>-->
  <!--show_mask  e-->
  <transition name="fade">
    <Loading v-if="get_Load"></Loading>
  </transition>
  <!--In_list s-->
  <transition name="fade">
    <router-view  v-if="thom_index_get_mess">

    </router-view>
  </transition>
  <!--In_list e-->
</div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex'
  import store from '../vuex/store_index';
  import axios from  "axios"
  import Loading from  "./Loading.vue"
  import In_list from  "./in_list.vue"
  export default {
    name: 'bottom_btn',
    data () {
      return {
        object: this.$store.getters.Get_Bot_C_obj,
        sign_c: true,
        num_box:{
                1:{c_sign:false,num:1,del:false},
                2:{c_sign:false,num:2,del:false},
                3:{c_sign:false,num:3,del:false},
                4:{c_sign:false,num:4,del:false},
                5:{c_sign:false,num:5,del:false},
                6:{c_sign:false,num:6,del:false},
                7:{c_sign:false,num:7,del:false},
                8:{c_sign:false,num:8,del:false},
                9:{c_sign:false,num:9,del:false},
                dot:{c_sign:false,num:".",del:false,dot:true},
                zero:{c_sign:false,num:0,del:false,zero:true},
                del:{c_sign:false,del:true}
        },
        top_input:"",
        bot_input:"",
        now_input:true,//true == top else == false
        mask_show:false,
        other_click:false,
        pre_bottom_click: this.$store.getters.pre_bottom_click,
//        change_in_list_show
//        Load:this.$store.getters.Loading_show
      }
    },
    computed: mapState([
      'BottomBtn'
    ]),
    components: {
      Loading,
      In_list
    },
    methods: {
      ...mapMutations([
        'M_BottomClick',
        'M_BottomClick_2',
        "bottom_btn_f",
        "in_list_show",
        "change_in_list_show"
      ]),
      ...mapActions([
          "get_in_list",
          "thom_index_get_mess"
      ]),
      add_1(sign) {
          this.mask_show = true
      },
      next_btn(){
        this.$store.commit("change_in_list_show");
        this.$store.dispatch("thom_redirect",{name:"/index/in/in_list",router:this.$router});
      },
      del(){
        if(this.now_input == true){
          this.top_input =   this.top_input.substring(0,this.top_input.length-1);
        }else{
          this.bot_input =   this.bot_input.substring(0,this.bot_input.length-1);
        }
      },
      select_input(flag){
         this.now_input = flag
      },
      num_touch(num){
        if(this.now_input == true){
          this.top_input = this.top_input.toString() + num.toString();
        }else{
            this.bot_input = this.bot_input.toString() + num.toString();
        }
      },
      //hide mask
      header_x(){
        this.mask_show = false
      },
      other_click_f(){
          this.other_click =  !this.other_click
      },
      select_list_click(e){
        this.$store.dispatch("in_get_main_mess",{obj:e})
      }
    },
    computed: {
      ...mapGetters([
        'Loading_show',
        "get_bottom_btn_list",
        "mock_mess",
        "in_list_show"

      ]),
      ...mapMutations([
          "Change_loading_show",
          "close_loading_mask",
          "change_in_list_show"
      ]),
      ...mapActions([
          "in_get_main_mess",

      ]),

      in_list_show_t(){
          return this.in_list_show
      },
      get_main_mess(){
        return this.mock_mess
      },
      get_Load(){
        return this.Loading_show
      },
      bottom_list(){
        return this.get_bottom_btn_list
      }
    },
    created(){
        this.$store.dispatch('thom_index_get_mess')
        this.get_in_list()
      //关闭loading mask
      //this.close_loading_mask()
    }
  }
</script>
<style scoped>
  /*loading s*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  /*loading e*/
  /*in_list s*/
   .trans-enter,.trans-leave-to{
     transform: translateX(0);
   }
  .trans-enter-active, .trans-leave-active {
    transform: translateX(200);
  }
  /*in_list e*/
  /*mask s*/
  .mask_input{
    text-align: center;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
  }
  .input_single{
    display: flex;
    transform: translate(18%);
  }
  .input_num{
    display: flex;
    transform: translate(18%);
  }
  .chang_num_box_li_dot{
     line-height: 0.5;
  }
  .chang_num_box_li{
    margin-left: -0.5vw;
  }
  .num_box_img li{

    /*width: 3vw;*/
  }
  .num_box_img{
    width: 2vw;
  }
  .mask_add_btn{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 15vw;
    height: 2.8rem;
    line-height: 2.8rem;
    text-align: center;
    color: #ffffff;
    background-color: #fa3c3c;
    font-size: 1.2rem;
    margin:  1.5rem auto 0;
    border-radius: 2vw;
    box-shadow: 0 5px 10px 4px rgba(240, 67, 66, 0.53);
    margin-bottom: 1rem;
  }
  /*num_box s*/
  .num_box{
    display: flex;
    width: 100%;
    height: 15rem;
    background: -webkit-linear-gradient(left, #fe595d , #d01f3b); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #fe595d, #d01f3b); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #fe595d, #d01f3b); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #fe595d , #d01f3b); /* 标准的语法 */
  }
  .num_box_item{
    width: 1vw;
    padding:0.5rem 4vw;
    color: #ffffff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1.8rem;
  }
  .num_box_warp{
    padding-top: 1rem;
    flex-wrap: wrap;
    display: flex;
    padding-left: 2vw;
  }
  /*num_box e*/
  /*mask e*/
  .m_t_50{
    margin-top: 2.1rem;
  }
  .input_num{
    margin-top: 1.8rem;
  }
  .wrap_input{
    margin-top: 2.5rem;
  }
  .mask_input{
    font-size: 1rem;
    padding-left: 0.1vw;
    padding-right: 0.1vw;
    -webkit-appearance:none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 点击去除高亮的颜色*/
    width: 13vw;
    border: 0;
    border-bottom: 1px solid #333;
  }
  .header_name{
    font-size: 1.2rem;
    color: #333333;
  }
  .header_x{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 97%;
    height: 2.15vw;
    font-size: 2.5vw;
    text-align: right;
  }
  .mask_BaoC{
    /*padding-right: 1%;*/
    width: 30vw;
    background-color: #ffffff;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .in_page{
    position: relative;
  }
  .in_page .show{
    visibility: visible;
    z-index: 100;
  }
  .hidden{
    visibility: hidden;
    z-index:0;
  }
  .mask{
    /*visibility: hidden;*/
    /*z-index: 0;*/
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height: 37.5rem;
    top:0;
    left:0;
    position: absolute;
  }
  .other_select_sec:after{
    position: absolute;
    content: "";
    width: 0vw;
    left:50%;
    transform: translateX(-50%);
    height: 0vw;
    border-left: 0.8vw solid transparent;
    border-right: 0.8vw solid transparent;
    border-top: 1vw solid #fff;
    /*box-shadow: 0 0  10px 3px rgba(20,20,20,0.2);*/
  }
  .other_select_sec{
    position: absolute;
    width: 12vw;
    top: -14rem;
    left: -1vw;
    box-shadow: 0 0  10px 3px rgba(20,20,20,0.2);
    z-index: 100;
  }
 .other_select .other_select_sec li{
   margin-top: 0;
    height: 2rem;
    line-height: 2rem;
    background-color: #ffffff;
  }
  .other_select{
    position: relative;

  }
  .other_select:after{
    width: 0vw;
    height: 0vw;
    border-left: 0.8vw solid transparent;
    border-right: 0.8vw solid transparent;
    border-top: 1vw solid #333333;
    content: "";
    position: absolute;
    right: -3vw;
    top:0.5rem;
  }
  .item_box_bottom_img{
    width: 1.6vw;
    display: block;
    /*padding-top: 0.15rem;*/
  }
  .bottom_list .next_btn_input{
    padding: 0.4rem 3.4vw ;
    color: #fff;
    background-color: #fa3f3e;
    border-radius: 2vw;
    margin-top: 0.4rem;
    box-shadow: 0 4px 10px 4px rgba(240, 67, 66, 0.53);
  }
  .bottom_list .active{
    /*padding-top: 0.25rem;*/
    border-bottom: 0.12rem solid #fa3c3c;
    color:#fa3c3c;
      /*text-decoration:underline*/
  }
  .bottom_list li{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    font-size: 1rem;
    height: 1.4rem;
    line-height: 1.4rem;
    font-weight: 500;
    margin-top: 0.8rem;
  }
  .bottom_list{
    background-color: #ffffff;
    cursor: pointer;
    margin-left: 3.3vw;
    margin-right: 3.3vw;
    height: 3rem;
    line-height: 3rem;
    display: flex;
    justify-content:space-between;
  }
  .item_box_bottom_bot{
    padding-left: 5.8vw;
    letter-spacing: 1px;
    line-height: 2;
    font-size: 0.8rem;
  }
  .item_box_bottom{
    display: flex;
    font-size: 0.6rem;
    padding-left: 1.8vw;
    margin-top: 1rem;
  }
  .item_box_title{
    display: flex;
    margin-top: 1rem;
  }
  .item_box_title p{
    font-size: 1rem;
    line-height: 1.2;
    padding-left: 1.8vw;
    padding-right: 4.6vw;
  }
  .item_box_title img{
    width: 2rem;
    height: 2rem;
  }
  .item_wrap_box{
    display: flex;
  }
.item_box{
   /*border: 0.2vw solid #fa3c3c;*/
   border: 0.2vw solid #ffffff;
   margin-right: 1.4vw;
   width: 18vw;
   height: 6rem;
   background-color: #ffffff;
   border-radius: 0.5vw;
   box-shadow: 0 3px 8px 0px rgba(112, 153, 226, 0.73);
   /*margin-top: 1rem;*/
}
.sec_warp_item{
  height: 28rem;
  overflow-y: scroll;
  margin-left: 2.8vw;
  margin-right: 2.8vw;
}
.sec_item{
    padding-top: 2rem;
}
.sec_icon{
   display: block;
}
.sec_icon img{
  display: block;
}
.item_header{
  display: flex;
  /*padding-left: 2.8vw;*/
  padding-bottom: 0.8rem;
}
.item_header span{
  font-size: 1.5rem;
  display: block;
  margin-left: 0.5vw;
  line-height: 0.8;
}
.item_header img{
  width: 0.6vw;
}
.sec{
   height: 28rem;
   background-color: #e3eaf6;
}
.input_header{
  font-size: 1rem;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #ffffff;
  color: #333;
  box-shadow: 0 0 10px 5px rgba(51, 51, 51, 0.13);
}
.in_page_bottom_btn{
  background-color: #ffffff;
   height: 3rem;
   box-shadow:0 -4px 10px 2px rgba(51, 51, 51, 0.13) ;
}
</style>
